<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>注册</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />

		<link rel="stylesheet" href="/static/user/AmazeUI-2.4.2/assets/css/amazeui.min.css" />
		<link href="/static/user/css/dlstyle.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="/static/user/css/cxls.css">
		<script src="/static/user/AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="/static/user/AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
		
		<style>
			input{
				outline: none;
			}
		</style>
		<script>
			function Namecheck()
			{
				let name = document.getElementById('user');
				if(name.value!='')
				{
					let a = document.getElementById('nameone');
					let b = document.getElementById('correct_icon1');
					$.ajax({
						url:"/user/User/namecheck",
						type:"post",
						dataType:"html",
						data:{UserName:$("#user").val()},
						success:function(data)
						{
							if(data == 1)
							{
								a.style.display = 'block';
								b.style.display = 'none';
								Lockbtn();
							}else
							{
								a.style.display = 'none';
								b.style.display = 'block';
								Lockbtn();
							}
						},
						error:function()
						{
						}
					}
					)
				}else
				{
					return;
				}
				
			}
			function Passcheck(){
				let a = document.getElementById('passone');
				let b = document.getElementById('correct_icon3');
				$.ajax({
					url:"user/User/passcheck",
					type:"post",
					dataType:"html",
					data:{PassWord:$("#pass").val()},
					success:function(data){
						if(data == 1){
							a.style.display = 'block';
							b.style.display = 'none';
							Lockbtn();
						}else{
							a.style.display = 'none';
							b.style.display = 'block';
							Lockbtn();
						}
					},
					error:function(){
					}
				})
			}
			function Mailcheck(){
				let usermail = document.getElementById('umail');
				let msg = document.getElementById('mailone');
				let b = document.getElementById('correct_icon2');
				let btn = document.getElementById('sendcode');
				msg.style.display = 'none';
				let model = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
				if(model.test(usermail.value)){
					msg.style.display = 'none';
					b.style.display = 'block';
					btn.classList.remove('am-disabled');
				}else{
					msg.style.display = 'block';
					b.style.display = 'none';
				}
			}
			function Cpasschkeck(){
				Lockbtn();
				let error = document.getElementById('passtwo');
				let b = document.getElementById('correct_icon4');
				if($("#pass").val() != $("#cpass").val()){
					error.style.display = 'block';
					b.style.display = 'none';
					Lockbtn();
				}
				else{
					error.style.display = 'none';
					b.style.display = 'block';
					Lockbtn();
				}
			}	

			/* function creatCode(){
                //设置默认的空字符串
                let code = '';
                //设置验证码长度
                let codeLength = 6;
                //获取min到max之间的整数
                function random(min,max){
                    return Math.floor(Math.random()*(max-min) + min);
                }
                let randomCode = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H',
                'I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
                'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r',
                's','t','u','v','w','x','y','z'];
                for(let i = 0; i < codeLength; i++){
                    let index = random(0,62)
                    code += randomCode[index];
                }
                return code;
            } */

			let t;
			let num = 30;
			function run(){
				if(num<0){
					let btn  =document.getElementById('sendcode');
					btn.classList.remove('am-disabled');
					btn.value = '发送验证码';
					clearTimeout(t);
					num = 30;
					return false;
				}
				$("#sendcode").val(`${num}s后重发`);
				--num;
				t=setTimeout("run()",1000)
			}
			function email()
			{
				let b = $("#umail").val();
				let btn = document.getElementById('sendcode');
				btn.classList.add('am-disabled');
				clearInterval(t);
				run();
					
				
				$.ajax({
					url:"/user/User/sendemail",
					type:"post",
					dataType:"html",
					data:{toemail:b},
					success:function(data)
					{
					},
					error:function()
					{
					}
				})
			}			
		</script>
	</head>

	<body style="background:#ffffff">

		<div class="login-boxtitle">
			<a href="/"><img alt="logo" src="/static/user/images/guangonglogo.jpg" /></a>
		</div>

		<div class="res-banner">
			<div class="res-main">
				<div class="login-banner-bg"><span></span><img src="/static/user/images/register/big.jpg" style="margin-top: 28px;"/></div>
				
				<div class="register_box">
					

					<form action="/user/user/reg" method="post" >
						<div>
							<h3 class="title">会员注册</h3>
							<a href="/login" class="loginlink">登录</a>
						</div>
						
						<div>
							<input required type="text" name="UserName" class="register_input1" id="user" placeholder="请输入用户名" onblur="Namecheck()" >
							<input type="" id="correct_icon1" class="correct_icon">
							<div class="msg" id="nameone">该用户名已存在</div>
						</div>
						<div>
							<input required type="text" name="umail" class="register_input4" id="umail" placeholder="请输入邮箱" onblur="Mailcheck()" >
							<input type="" id="correct_icon2" class="correct_icon">
							<div class="msg" id="mailone">邮箱地址不正确</div>
						</div>
						<div class="email">
							<input required type="text" name="Code" class="register_input3" id="Code" placeholder="邮箱验证码">
							<input type="button" id="sendcode" class="am-btn am-btn-secondary btn-loading-example am-disabled" data-am-loading = '60s后可重新发送' onclick="email()" value="发送验证码">
						</div>
						<div>
							<input required type="password" name="PassWord" class="register_input2"  id="pass" placeholder="设置密码" onblur="Passcheck()">
							<input type="" id="correct_icon3" class="correct_icon">
							<div class="msg" id="passone">密码必须6位以上</div>
						</div>
						<div>
							<input required type="password" name="cpassword" class="register_input2" id="cpass" placeholder="确认密码" onblur="Cpasschkeck()">
							<input type="" id="correct_icon4" class="correct_icon">
							<div class="msg" id="passtwo">输入密码不一致</div>
						</div>
						<div class="btn1">
							<button type="submit" class="am-btn am-btn-secondary" id="comfirm">提交</button>
						</div>
					 </form>
					 
				</div>	
			</div>
			
			

			<div class="footer">
				<div class="footer-top">
						<div class="footer-top-container">
								<a href="#">
										<img src="/static/user/images/f1.png" alt="">
								</a>
								<a href="#">
										<img src="/static/user/images/f2.png" alt="">
								</a>
								<a href="#">
									<img src="/static/user/images/f4.png" alt="">
							</a>
						</div>
				</div>
				<div class="footer-bottom">
						<div class="footer-bottom-container">
								<ul class="links">
										<a href="javascript:;"><li class="link-item">免责条款</li></a>
										<a href="javascript:;"><li class="link-item">隐私保护</li></a>
										<a href="javascript:;"><li class="link-item">咨询热点</li></a>
										<a href="javascript:;"><li class="link-item">联系我们</li></a>
										<a href="javascript:;"><li class="link-item">公司简介</li></a>
										<a href="javascript:;"><li class="link-item">批发方案</li></a>
										<a href="javascript:;"><li class="link-item">配送方式</li></a>
								</ul>
								<p class="copyright">
										2019-2025 © 零食商城 所有 地址：中国·广东·东莞 服务时间：09:00-22:00
								</p>
								<div class="hexin-logo">
										<img src="/static/user/images/hexin.png" alt="">
								</div>
								<div class="cnzz">
										<img src="/static/user/images/pic2.gif" alt="">
								</div>
						</div>
				</div>
		</div>
	</body>
	<script>

		function Lockbtn(){
		    let a = document.getElementById('nameone');
		    let b = document.getElementById('passone');
		    let c = document.getElementById('passtwo');
		    let btn = document.getElementById('comfirm');
		    if( a.style.display == 'block' || b.style.display == 'block' || c.style.display == 'block'){
		        btn.classList.add('am-disabled');
		    }else{
		        btn.classList = 'am-btn am-btn-secondary am-btn-sm';
		    }
		}


	</script>

</html>